<template>
	<view class="warp">
		<view class="uni-margin-wrap">
			<view class="uni-back-view">
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_mobile.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="手机号" v-model="inputData.mobile" /></view>
					</view>
					<view class="uni-item-view-right">
						<view><text></text></view>
					</view>
				</view>
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_code.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="验证码" v-model="inputData.code" /></view>
					</view>
					<view class="uni-item-view-right" @click="sendClick">
						<!-- <view class="code-text"><text>获取验证码</text></view> -->
						<view v-if="showText == true" class="code-text">发送验证码</view>
						<view v-else class="code-text">{{ second }}s重新发送</view>
					</view>
				</view>
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_pwd.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="请输入新密码" :password="true" v-model="inputData.password" /></view>
					</view>
					<view class="uni-item-view-right">
						<view><text></text></view>
					</view>
				</view>
				<view class="uni-item-view">
					<view class="uni-item-view-left">
						<view class="uni-item-view-left-image"><image class="image" :src="'/static/login/login_pwd.png'"></image></view>
						<view class="uni-item-view-left-input"><input class="uni-input input" type="text" placeholder="请确认新密码" :password="true" v-model="inputData.configpwd" /></view>
					</view>
					<view class="uni-item-view-right">
						<view><text></text></view>
					</view>
				</view>
				<view class="uni-item-view1">
					<view class="uni-item-view-btn">
						<view class="btn" @click="submitClick"><text>提交</text></view>
					</view>
				</view>

				<view class="uni-item-view1">
					<view class="uni-item-view-title">
						<view><text class="text1">手机收不到短信验证码？</text></view>
						<view><text class="text2">1、检查短信是否拦截，将发件人加入白名单。</text></view>
						<view><text class="text2">2、每个账号每天发送验证码次数有限。</text></view>
						<view><text class="text2">3、可能由于网路异常导致，请重新获取或者稍后再试</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			inputData:{
				mobile:'',
				code:'',
				password:'',
				configpwd:''
			},
			second: 60,
			showText: true,
		};
	},
	methods: {
		getCode() {
			//倒计时
			this.showText = false;
			var interval = setInterval(() => {
				let times = --this.second;
				this.second = times < 10 ? '0' + times : times; //小于10秒补 0
			}, 1000);
			setTimeout(() => {
				clearInterval(interval);
				this.second = 60;
				this.showText = true;
			}, 60000);
		},
		sendClick(){
			if(!this.showText){
				return
			}
			if(this.check.isNull(this.inputData.mobile)){
				uni.showToast({
					title:"请填写手机号"
				})
				return
			}
			this.sendMessageData();
		},
		submitClick(){
			if(this.check.isNull(this.inputData.mobile)){
				uni.showToast({
					title:"请填写手机号"
				})
				return
			}
			if(this.check.isNull(this.inputData.code)){
				uni.showToast({
					title:"请填写验证码"
				})
				return
			}
			
			if(this.inputData.password != this.inputData.configpwd){
				uni.showToast({
					title:"新密码与确认密码不一致"
				})
				return
			}
			
			this.updatePasswordData();
		},
		sendMessageData(){
			var data = {
				mobile:this.inputData.mobile,
			}
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.login.captchaSmsApi,
				data: data,
				success: res => {
					console.log(res)
					if (res.success == 'true' && res.data) {
						this.getCode();
					}
					uni.showToast({
						title:res.message
					})
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res =>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		updatePasswordData(){
			var data = {
				captcha:this.inputData.code,
				mobile:this.inputData.mobile,
				password:this.inputData.password,
			}
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.login.aPasswordLoginApi,
				data: data,
				success: res => {
					console.log(res)
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					uni.showToast({
						title:res.message
					})
					if (res.success == 'true' && res.data) {
						 this.$util.redirectToHome(true);
					}
				},
				fail: res =>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
	}
};
</script>

<style lang="scss">
.uni-back-view {
	margin-top: 32rpx;
	margin-bottom: 32rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;

	padding-top: 32rpx;
	padding-bottom: 32rpx;
	background-color: #fff;
	border-radius: 10rpx;
}
.uni-item-view1{
	// width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// margin-left: 32rpx;
	//     margin-right: 32rpx;
	background-color: #fff;
	.uni-item-view-title {
		display: flex;
		flex-direction: column;
		padding-left: 32rpx;
		padding-right: 32rpx;
		width: 100%;
		margin-top: 64rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
		.text1 {
			font-size: 28rpx;
			color: $uni-text-color-primary;
		}
		.text2 {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}
	}
	.uni-item-view-btn {
		width: 100%;
		margin-left: 16rpx;
		margin-right: 16rpx;
		margin-top: 32rpx;
		.btn {
			height: 80rpx;
			// width: 100%;
			background-color: $uni-btn-color-primary;
			color: #fff;
			margin-left: 32rpx;
			margin-right: 32rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
.uni-item-view {
	// width: 100%;
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// margin-left: 32rpx;
	//     margin-right: 32rpx;
	background-color: #fff;
	
	.uni-item-view-left {
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		.uni-item-view-left-image {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 16rpx;
			.image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.uni-item-view-left-input {
			width: 100%;
			.input {
				padding-left: 0rpx;
			}
		}
	}

	.uni-item-view-right {
		width: 240rpx;
		background-color: #fff;
		font-size: 28rpx;
		margin-right: 32rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.code-text {
			color: $uni-text-color-primary;
			font-size: 26rpx;
			margin-top: 16rpx;
			margin-bottom: 16rpx;
		}
	}
}
</style>
